<template>
    <div class="page" data-page="keyAlarm" style="z-index: 2;">
        <div class="link-page-nav">
            <a href="#" class="link" @click=$root.backToTab()>
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-top">
            <div class="link-page-title">一键报警</div>
        </div>
        <div class="page-content" id="kalarm" style="padding-top: 0;padding-bottom: 100px;">
            <div id="keyAlarmPic_keyAlarm" style="margin: 10px 20px;"></div>
            <div style="margin-top:-30px;margin-bottom:8px;">
                <div style="padding-left: 20px;font-size: 17px;font-weight: bold;">描述</div>
                <textarea class="resizable cancle-ios-write" placeholder="填写清晰明了的描述现场情况有利于他人的处理" id="desc" name="bjms"></textarea>
            </div>
            <div class="hiddenDanger-block" style="display: none;">
                <div class="right-con">
                    <div class="voice" style="width:200px;margin-top:50px;">
                        <div id="crTb_inputDetails" class="voice-before" style="font-size:13px">
                            <i class="iconfont icon-yuyin1"></i>点击语音输入
                        </div>
                        <div class="voice-after" style="display: none">
                            <div class="voice-after-time"><i class="iconfont icon-yuyin-copy"></i></div>
                            <div class="delete"><i class="iconfont icon-icon-shanchu-copy"></i></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="navbar" id="unitSelect" style="top: -14px;height: 40px;background: #fff;color: #333333;">
                    <div class="content-block myBlock">
                        <div style="padding-left: 4px;font-size: 17px;font-weight: bold;">通知单位</div>
                        <div class="row troubleApply-type" id="show_unit">
                            <input type="text" name="SBDZ" placeholder="全部单位" class="input-with-value" id="getunit"
                                readonly="readonly">
                            <i class="select-right" style=" right: 2%;top: 36%;"></i>
                        </div>
                    </div>
            </div>
            <div style="margin-top:17px;">
            <div style="padding-left: 20px;font-size: 17px;font-weight: bold;">报警位置</div>
            <div id="myMapInfo" style="height: 200px; margin: 20px"></div>
            <div style="margin-left: 20px;margin-right: 18px;font-size: 14px;color: #999999;">我们会上传您的位置信息，方便快速定位警情，若位置不对，请点击<a @click="drowBmap()">刷新</a></div>
            <!-- <a href="#" class="line_wz">
                <i class="iconfont icon-dingwei2"></i>
                <input type="text" class="lefttext" id="keyAlarm-location" style="display: inherit" value="---" />
            </a> -->
            </div>
            <div class="block" style="top: 44px;margin: auto;margin-bottom: 50px;" id="show_heig">
                <p class="row" style="width: 100%">
                    <button class="col button button-big button-raised button-fill" style="background: linear-gradient(to top, #378bf6 , #378bf6 );"
                        @click="viewBlak_update">提交</button>
                </p>
            </div>
        </div>
    </div>
</template>
<style>
    #getunit {
        margin-left: 5px;
        margin-top: 5px;
        height: 34px;
        width: 90%;
        text-indent: 5px;
        font-size: 18px;
    }

    .unit_topname {
        padding-left: 18px;
        padding-top: 5px;
        margin: auto;
        font-size: 14px;
        color: #222222;
    }

    .cus_wup {
        float: left;
        padding-left: 0px;
    }

    .inp_cus {
        width: 100%;
        height: 165px;
    }

    .up_cus {
        margin: 6px;
        position: relative;
        float: left;
        /*        background: url(./img/home/upload_pic.png);*/
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        position: relative;
    }

    .ul_cus {
        padding: 3px;
        float: left;
    }

    .cus {
        height: 100px;
        padding-left: 18px;
    }

    .line_wz {
        white-space: nowrap;
        display: inline-block;
        width: 92%;
        top: 15px;
        left: 18px;
        position: relative;
    }

    .btnupdate {
        font-size: 17px;
        color: #04a9ff;
    }

    .lefttext {
        padding-left: 0px;
        color: #333333 !important;
        width: 92%;
        white-space: nowrap;
        display: inline-block !important;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1;
        font-size: 14px;
    }

    .resizable {
        font-size: 15px;
        width: 100%;
        padding: 18px;
        min-height: 80px;
        max-height: 250px;
    }

    #file {
        font-size: 1px;
        top: 0px;
        left: 0px;
        opacity: 0;
        width: 100px;
        height: 100px;
        display: block;
        color: #999999;
    }

    .add_image {
        position: absolute;
        top: 8px;
        width: 100px;
        height: 100px;
    }

    #line_width {
        width: 100%;
        height: auto;
        /* min-height: 100px; */
        /* display: inline-block; */
    }

    .del {
        width: 14px;
        height: 14px;
        right: 5px;
        position: absolute;
    }

    .button-fill {
        width: 91% !important;
        height: 44px !important;
        margin: 0 auto;
        background: linear-gradient(to top, #238afb, #40affe);
        line-height: 0px;
        font-size: 16px;
    }

    #kalarm .messagebar-attachments {
        border-bottom: 1px solid rgba(221, 221, 221, 0.5);
    }
    .select-right {
        width: 13px;
        height: 13px;
        background: url(./img/common/select.png);
        background-repeat: no-repeat;
        float: left;
        position: absolute;
        vertical-align: middle;
        background-size: 100%;
    }
    .demo-swiper .swiper-slide {
        font-size: 25px;
        font-weight: 300;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
        color: #333333;
    }
    .demo-swiper .swiper-slide {
        box-sizing: border-box;
        /* border: 1px solid #ddd; */
        background: #fff;
    }
    .demo-swiper {
        margin: 0px 0 35px;
        font-size: 18px;
        height: 200px;
    }
    .demo-swiper.demo-swiper-auto .swiper-slide {
        width: 85%;
    }
    .demo-swiper.demo-swiper-auto .swiper-slide:nth-child(2n) {
        width: 70%;
    }
    .demo-swiper.demo-swiper-auto .swiper-slide:nth-child(3n) {
        width: 30%;
    }
    .BMap_cpyCtrl {
        display: none;
    }
    .anchorBL {
        display: none;
    }
    .createTrouble_del {
        width: 14px;
        height: 14px;
        right: 7px;
        top: 3px;
        border-radius: 100px;
        position: absolute;
        background: url(./img/home/del_pic.png);
    }
</style>
<script>
    return {
        mounted() {
            var self = this;
            var $ = self.$;
            self.hiddenDangerDesc = self.$route.params.detail;
            if (self.hiddenDangerDesc != "''" && self.hiddenDangerDesc != undefined) {
                $("#crTb_textarea1").append(self.hiddenDangerDesc);
            }
        },
        data: function () {
            return {
                pageName:"keyAlarm",
                imageArr: [],
                getLoctext: "",
                longitude: "",
                latitude: "",
                ka_Orgid: 0,
                locationValue:"",
                getNewId: (new Date()).getTime(),
            }
        },
        methods: {
            drowBmap :function(){
                var self = this;
                //百度地图显示
                var map = new BMap.Map('myMapInfo',{
                   enableMapClick:false //关闭底图可点功能
                });
                var point=null;
                var lon=self.longitude?self.longitude:118.523111;
                var lat=self.latitude?self.latitude:32.23126;
                var name='';
                point = new BMap.Point(lon, lat);
                var icon = new BMap.Icon('/ilink-app-h5-zd/static/img/rdspFile_1552981560146.png', new BMap.Size(35, 55), {
                    anchor: new BMap.Size(35,55)
                });
                var marker = new BMap.Marker(point, {
                    icon: icon
                });
                map.addOverlay(marker);
                map.centerAndZoom(point,15); 
                map.enableScrollWheelZoom(); //允许缩放
            },
            getunit: function () {
                var self = this;
                if (userInfor.isMuilUnitUser == 1) {
                    $("#unitSelect").show();
                    $("#getunit").show().click(function (event) {
                        loadSelectUnitFunc(function (data) {
                            self.ka_Orgid = data.orgId;
                            $("#getunit").val(data.orgName);
                        });
                    });
                } else {
                    $("#unitSelect").hide();
                    self.ka_Orgid = userInfor.organizationIds;
                    $("#getunit").val(userInfor.org.name);
                    $(".select-right").hide();
                }
            },
            viewBlak_update: function () {
                var self = this;
                var formData = app.form.convertToData('#kalarm');
                var bjms = jQuery.trim(formData.bjms);
                if (bjms == "") {
                    app.methods.showToastBottom("请填写描述");
                    return;
                }
                if (self.ka_Orgid == 0) {
                    app.methods.showToastBottom("请选择需要通知的单位");
                    return;
                }            
                locationValue=jQuery("#keyAlarm-location").val();
                Dao.keyAlarm_post({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    organizationId: self.ka_Orgid,
                    desc: bjms,
                    pictureUrl: self.imageArr.toString(),
                    location:self.getLoctext,
                    longitude:self.longitude,
                    latitude:self.latitude,
                    phone: userInfor.phone,
                    createAccount: userInfor.accountName,
                }, function (data) {
                    app.methods.showToastBottom("一键报警成功");
                    app.router.back();
                }, true);
            },
            initTbPiker: function () {
                var self = this;
                $("#crTb_inputDetails").click(function (e) {
                    //第二个参数是否需要保存语音
                    native.startVoice("desc", false);
                });
            },
            //语音输入回调
            voiceCollectionData: function (voiceStr, componentId) {
                var text = $("#" + componentId).val();
                if (!voiceStr || "" === voiceStr.trim()) {
                    app.methods.showToastCenter("未能识别您说的语音,请重试。");
                } else {
                    $("#" + componentId).val(text + voiceStr);
                }
            },
            //获取原生回调的位置信息
            getNativeBackLocation:function(longitude,latitude,location){
                var self = this;
                self.longitude = longitude;
                self.latitude = latitude;
                self.getLoctext = location;
                self.drowBmap();
            }
        },
        on: {
            pageInit: function (e, page) {
                var self = this;
                self.imageArr = [];
                self.getunit();
                if (userInfor.accountName == "review" || userInfor.accountName == "review_yq" || userInfor.accountName == "review_qy") {
                    $(".hiddenDanger-block").show();
                    $(".hiddenDanger-block").css("display","table-cell");
                    self.initTbPiker();
                }
                native.requestLocation();
                self.drowBmap();
            },
            pageAfterIn:function(){
                var self = this;
                //初始化上传
                upLoadImagesCompt(jQuery("#keyAlarmPic_keyAlarm"),function(pic,isAdd){
                    if(isAdd == "add"){
                        self.imageArr.unshift(pic);
                    }else{
                        let index = self.imageArr.indexOf(pic);
                        self.imageArr.splice(index,1);
                    }
                },true,null,'keyAlarmPic_keyAlarm_container_' + self.getNewId,'keyAlarmPic_keyAlarm_pick_' + self.getNewId,true);
            },
            pageBeforeRemove: function(e, page) {
               
            }
        }
    }
</script>